---
layout: layouts/base.njk
oLayoutStyle: "o-layout--landing"
---
<div class="o-layout__hero o-layout-typography o-website__hero--home">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 400">
		<g id="g1">
			<rect width="79" height="400" fill="#cccccc"/>
			<rect width="79" height="250" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="250;400;250" begin="g1.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g2">
			<rect x="80" width="79" height="400" fill="#cccccc"/>
			<rect x="80" width="79" height="200" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="200;400;200" begin="g2.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g3">
			<rect x="160" width="79" height="400" fill="#cccccc"/>
			<rect x="160" width="79" height="170" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="170;400;170" begin="g3.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g4">
			<rect x="240" width="79" height="400" fill="#cccccc"/>
			<rect x="240" width="79" height="120" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="120;400;120" begin="g4.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g5">
			<rect x="320" width="79" height="400" fill="#cccccc"/>
			<rect x="320" width="79" height="200" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="200;400;200" begin="g5.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g6">
			<rect x="400" width="79" height="400" fill="#cccccc"/>
			<rect x="400" width="79" height="240" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="240;400;240" begin="g6.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g7">
			<rect x="480" width="79" height="400" fill="#cccccc"/>
			<rect x="480" width="79" height="290" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="290;400;290" begin="g7.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g8">
			<rect x="560" width="79" height="400" fill="#cccccc"/>
			<rect x="560" width="79" height="190" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="190;400;190" begin="g8.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g9">
			<rect x="640" width="79" height="400" fill="#cccccc"/>
			<rect x="640" width="79" height="150" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="150;400;150" begin="g9.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g10">
			<rect x="720" width="79" height="400" fill="#cccccc"/>
			<rect x="720" width="79" height="90" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="90;400;90" begin="g10.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g11">
			<rect x="800" width="79" height="400" fill="#cccccc"/>
			<rect x="800" width="79" height="110" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="110;400;110" begin="g11.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g12">
			<rect x="880" width="79" height="400" fill="#cccccc"/>
			<rect x="880" width="79" height="160" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="160;400;160" begin="g12.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g13">
			<rect x="960" width="79" height="400" fill="#cccccc"/>
			<rect x="960" width="79" height="240" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="240;400;240" begin="g13.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g14">
			<rect x="1040" width="79" height="400" fill="#cccccc"/>
			<rect x="1040" width="79" height="280" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="280;400;280" begin="g14.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g15">
			<rect x="1120" width="79" height="400" fill="#cccccc"/>
			<rect x="1120" width="79" height="340" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="340;400;340" begin="g15.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g16">
			<rect x="1200" width="79" height="400" fill="#cccccc"/>
			<rect x="1200" width="79" height="290" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="290;400;290" begin="g16.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g17">
			<rect x="1280" width="79" height="400" fill="#cccccc"/>
			<rect x="1280" width="79" height="310" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="310;400;310" begin="g17.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g18">
			<rect x="1360" width="79" height="400" fill="#cccccc"/>
			<rect x="1360" width="79" height="260" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="260;400;260" begin="g18.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g20">
			<rect x="1440" width="79" height="400" fill="#cccccc"/>
			<rect x="1440" width="79" height="220" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="220;400;220" begin="g20.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
		<g id="g20">
			<rect x="1520" width="79" height="400" fill="#cccccc"/>
			<rect x="1520" width="79" height="300" fill="rgba(10,149,199, 0.7)">
				<animate attributeName="height" values="300;400;300" begin="g20.mouseenter" dur="1.3s" restart="whenNotActive"/>
			</rect>
		</g>
	</svg>
	<div class="o-website__hero--text">
		<h1>Polyfill.io</h1>
		<p>
			Upgrade the web. Automatically.
		</p>
	</div>
</div>

<div class="o-layout__main o-layout-typography">
	<div class="o-layout__overview">
		<div class="o-layout-item">
			<h2>What is Polyfill.io?</h2>
			<p>
				It's a service which accepts a request for a set of browser features and returns only the polyfills that are
				needed by the requesting browser.
			</p>
		</div>
		<div class="o-layout-item">
			<h2>Why do I need it?</h2>
			<p>
				There are lots of differing browsers and browser versions in use throughout the world, each one has a slightly
				different set of features to the rest. This can make developing for browsers a difficult task. The latest
				versions of the popular browsers can do lots of things which older browsers can not – but you may still have
				to support the older browsers. Polyfill.io makes it simpler to support differing browsers by attempting to
				recreate the missing features with polyfills: You can make use of the latest and greatest features in browsers
				which support them, and in those that do not.
			</p>
		</div>
	</div>
</div>
